<template>
  <div class="person-list" v-infinite-scroll="scrollLoad" :infinite-scroll-distance="50" :infinite-scroll-immediate="false">
    <template v-for="item in list" :key="item.peopleNo">
      <div class="person-item" @click="showPersonDetail(item)">
        <div class="person-item-left">
          <div class="person-item-left-name">
            <span
              class="person-item-left-name-text"
              :class="{
                'text-green': item.isSpercial === '1',
                'text-yellow': item.isLeader === '1'
              }"
            >
              {{ item.name }}
            </span>
            <span v-if="item.workType">&nbsp;&nbsp;·&nbsp;&nbsp;</span>
            <span>{{ item.workType }}</span>
          </div>
          <div class="person-item-left-station">{{ item.jzName }}</div>
          <div class="person-item-left-time">入井{{ item.inTimeStr }}</div>
          <div class="person-item-left-entry-time">{{ item.inTime || '--' }} 入井</div>
        </div>
        <div class="person-item-right">
          <div class="history-btn" @click.stop="showHistoryTrack(item)">
            <i class="iconfont icon-huifang"></i>
            轨迹
          </div>
          <img
            v-if="item.archivesUrl"
            class="person-item-right--image"
            :src="`${BASE_API}system/archives/download/${item.archivesUrl}`"
          />
          <img v-else class="person-item-right--image" src="@/assets/images/people.svg" />
        </div>
      </div>
    </template>
    <div v-if="status" class="status">
      {{ status }}
    </div>
  </div>
</template>

<script setup lang="ts">
import { useInfiniteScroll } from '@/hooks/useInfiniteScroll'
import { useDialog } from '@/hooks/useDialog'
import PersonDetails from './personDetails/personDetails.vue'

// 定义组件名称
defineOptions({
  name: 'PersonList'
})

const BASE_API = import.meta.env.VITE_APP_BASE_URL

// 定义人员项接口
interface PersonItem {
  peopleNo: string
  name: string
  workType: string
  jzName: string
  inTimeStr: string
  inTime: string
  archivesUrl: string
  isSpercial: string
  isLeader: string
}

defineProps<{
  list: PersonItem[]
  status: string
}>()

const { openDialog } = useDialog({
  defaultWidth: 600,
  defaultHeight: 300
})

/**
 * 在对话框中显示人员详情
 * @param item - 要显示详情的人员项
 */
function showPersonDetail(item: PersonItem) {
  openDialog(item.name, PersonDetails, item)
}
/**
 * 显示人员轨迹
 * @param item - 要显示轨迹的人员项
   */
function showHistoryTrack(item: PersonItem) {
  emit('showHistoryTrack', item)
}

const emit = defineEmits(['scrollLoad', 'showHistoryTrack'])

const { scrollLoad } = useInfiniteScroll(() => {
  emit('scrollLoad')
})
</script>

<style scoped lang="scss">
.person-list {
  flex: 1;
  overflow-y: auto;
  padding-left: 16px;
  direction: rtl;
  .person-item {
    background: var(--bg-color-page);
    display: flex;
    align-items: center;
    margin-bottom: 8px;
    cursor: pointer;
    direction: ltr;
    padding: 8px;

    &:last-child {
      margin-bottom: 0;
    }

    .person-item-left {
      text-align: left;
      flex: 1;
      display: flex;
      flex-direction: column;
      .person-item-left-name {
        font-size: 14px;
        .person-item-left-name-text {
          color: var(--el-color-primary);
          &.text-yellow {
            color: var(--el-color-warning);
          }
          &.text-green {
            color: var(--el-color-success);
          }
        }
      }
      .person-item-left-station {
        margin-top: 8px;
        font-size: 14px;
        color: var(--text-color-disabled);
      }
      .person-item-left-time {
        margin-top: 4px;
        font-size: 14px;
        color: var(--text-color-disabled);
      }
      .person-item-left-entry-time {
        margin-top: 12px;
        font-size: 12px;
        color: var(--text-color-secondary);
      }
    }
    .person-item-right {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-left: 8px;
      .history-btn {
        align-self: flex-end;
        font-size: 12px;
        color: var(--el-color-primary);
        &:hover {
          color: var(--el-color-primary-light-3);
        }
      }
      .person-item-right--image {
        height: 74px;
        background: var(--bg-color-overlay);
        margin: 4px;
        padding: 14px 10px;
        width: 100%;
        object-fit: contain;
      }
    }
  }
  .status {
    text-align: center;
    padding: 8px 0;
  }
}
</style>
